import React from 'react';
import { Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, message } from 'antd';
const R = require('ramda');
import RequirementDetail from '../components/requirementDetail';
import RightBox from "../../commons/RightBox";
import RIGHT from "../../../utils/RightConstants";
import Constants from "../../../utils/Constants";
import { downloadFile } from '../../../utils/commons';
import { connect } from 'dva/index';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const type = ['原始需求', '交涉样品', '签约生产'];

const requirement = Form.create({ wrappedComponentRef: true })(class Requirement extends React.Component {
    constructor(props) {
        super(props);
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource
        this.state = {

        };
    }

    handleResetFields = () => {
        this.props.form.resetFields();
    }

    handleSearch = () => {
        let values = this.props.form.getFieldsValue();
        let newPage = this.props.requirement.page;
        newPage.page = 1;
        let time = values.time;
        this.props.dispatch({
            type: 'requirement/query',
            payload: {
                buyerId: this.props.buyerId,
                type: values.type,
                beginTime: R.isNil(time) || R.isEmpty(time) ? null : time[0].format(Constants.DATEFORMAT),
                endTime: R.isNil(time) || R.isEmpty(time) ? null : time[1].format(Constants.DATEFORMAT),
                page: newPage
            }
        });
    };

    handleOpen = (disabled) => {
        this.requirementDetail.handleOpen(disabled);
    }

    columns = [
        {
            title: '类型', dataIndex: 'type', key: 'type', render: (text, record, index) => {
                return type[record.type];
            }
        },
        {
            title: '附件', dataIndex: 'url', key: 'url', render(text) {
                return <a href="#" onClick={() => downloadFile(Constants.FILE_MODULE[3], text)}> {text ? text.substring(text.lastIndexOf('/') + 1, text.length) : ""}</a>
            }
        },
        { title: '备注', dataIndex: 'memo', key: 'memo' },
        { title: '创建人', dataIndex: 'creatorName', key: 'creatorName' },
        { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
        {
            title: '操作', key: 'key_oprator',
            render: (text, record, index) => {
                return (
                    <span>
                        <RightBox resource={RIGHT.OUTBUY.OUTBUY_REQUIRE_DELETE}>
                            <Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'} onConfirm={() => {
                                this.props.dispatch({
                                    type: 'requirement/remove',
                                    payload: {
                                        id: record.id,
                                        onSuccess: () => {
                                            this.props.dispatch({ type: 'requirement/query', payload: { buyerId: this.props.buyerId, page: Constants.DEFAULT_PAGE } });
                                        }
                                    }
                                })
                            }} okText="是" cancelText="否">
                                <a href="#" disabled={this.props.disabled}>删除</a>
                            </Popconfirm>
                        </RightBox>
                    </span>
                );
            }
        }];

    render() {
        const { getFieldDecorator } = this.props.form;
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        let formItemLayout = {
            labelCol: { xs: { span: 24 }, sm: { span: 6 } },
            wrapperCol: { xs: { span: 24 }, sm: { span: 14 } }
        };
        let values = this.props.form.getFieldsValue();
        let time = values.time;
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.requirement.page.size,
            total: this.props.requirement.page.totalRow,
            showSizeChanger: true,
            current: this.props.requirement.page.page,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.requirement.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'requirement/query',
                    payload: {
                        id: R.isNil(dataSource.id) ? "" : dataSource.id,
                        beginTime: R.isNil(time) || R.isEmpty(time) ? null : time[0].format(Constants.DATEFORMAT),
                        endTime: R.isNil(time) || R.isEmpty(time) ? null : time[1].format(Constants.DATEFORMAT),
                        type: values.type,
                        page: newPage,
                        buyerId: this.props.buyerId
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let values = this.props.form.getFieldsValue();
                let newPage = this.props.requirement.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'requirement/query',
                    payload: {
                        id: R.isNil(dataSource.id) ? "" : dataSource.id,
                        beginTime: R.isNil(time) || R.isEmpty(time) ? null : time[0].format(Constants.DATEFORMAT),
                        endTime: R.isNil(time) || R.isEmpty(time) ? null : time[1].format(Constants.DATEFORMAT),
                        type: values.type,
                        page: newPage,
                        buyerId: this.props.buyerId
                    }
                });
            }
        }

        return (
            <div>
                <Form>
                    <Row>
                        <Col span={6}><FormItem {...formItemLayout} label={'类型'}>{getFieldDecorator('type')(
                            <Select disabled={this.state.disabled} allowClear>
                                <Select.Option value="0">原始需求</Select.Option>
                                <Select.Option value="1">交涉样品</Select.Option>
                                <Select.Option value="2">签约生产</Select.Option>
                            </Select>)}</FormItem></Col>
                        <Col span={8}>
                            <FormItem {...formItemLayout} label={'创建时间'}>
                                {getFieldDecorator('time', {})(
                                    <RangePicker
                                        style={{ width: 265 }}
                                        showTime={{ format: 'YYYY-MM-DD' }}
                                        format="YYYY-MM-DD"
                                        placeholder={['开始时间', '结束时间']}
                                    />
                                )}
                            </FormItem>
                        </Col>
                        <Col span={7} style={{ float: 'right' }}>
                            <Button type="primary" icon="search" style={{ marginRight: 5 }} onClick={this.handleSearch.bind(this)}>查询</Button>
                            <RightBox resource={RIGHT.OUTBUY.OUTBUY_REQUIRE_ADD}>
                                <Button type="primary" icon="plus" style={{ marginRight: 5 }} onClick={this.handleOpen.bind(this, false)}>新增需求</Button>
                            </RightBox>
                        </Col>
                    </Row>
                </Form>
                <Table rowKey={item => item.id} dataSource={this.props.requirement.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination} scroll={{ x: true }} />

                {<RequirementDetail wrappedComponentRef={(inst) => this.requirementDetail = inst} dispatch={this.props.dispatch} buyerId={this.props.buyerId} />}

            </div>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.requirement, requirement: state.requirement
    };
}

export default connect(mapStateToProps)(requirement);